<template>
<div class="block">
	<el-divider></el-divider>
	<el-row :gutter="20">
		<el-col :span="16"
          ><div class="grid-content bg-purple">
				<el-timeline>
					<div v-for="blog in blogpart">
					<el-timeline-item  :timestamp=blog.updateTime placement="top">
					<el-card>
						<div class="blogtitle">
							<el-link @click="onSubmit(blog)" :underline="false" target="_blank">{{blog.title}}</el-link>
						</div>
						<div>
							<h6>{{blog.descp}}</h6>
						</div>
						<div style="font-size: smaller;">
							<span style="color: #95c4fd;" class="blogtime">{{blog.blogAuthor}}&nbsp;&nbsp;</span><span>提交于 </span><span style="color: #95c4fd;" class="blogtime">&nbsp;{{blog.createTime}}</span>
						</div>
					</el-card>
					</el-timeline-item>
					</div>

				</el-timeline>

			  </div>
		</el-col>
		<el-col :span="8"
          ><div class="grid-content bg-purple">

			  <el-calendar v-model="value" id="calendar">
	<template
		slot="dateCell"
		slot-scope="{data}">
		<div v-for="blog in blogs"><div v-if="blog.updateTime == data.day" style="display:none">{{++count}}</div></div>
		<div v-if="count">
			<el-badge is-dot :value=count :max="99" class="item">
				<div :class="data.isSelected ? 'is-selected' : ''" @click="OnCalendar(data.day)">
				{{ data.day.split('-').slice(2).join('') }}
				</div>
			</el-badge>
		</div>
		<div v-else>
			<div :class="data.isSelected ? 'is-selected' : ''">
			{{ data.day.split('-').slice(2).join('') }}
			</div>
		</div>
		<div style="display:none">{{count = 0}}</div>
	</template>
</el-calendar>
			  </div>
		</el-col>
	</el-row>
    <el-backtop></el-backtop>
</div>
</template>

<script>
import $ from 'jquery'
let count = 0;
export default {
	name: "BlogTimeline",
  data() {
    return {
		dataDay: '',
		blogs: [],
		value: new Date(),
		blogpart: [],
	}
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData();
	this.getBlogList();
  },
  methods: {
	  fetchData () {
      // replace getPost with your data fetching util / API wrapper
	//   console.log('获取数据');
    //   console.log(this.$route.params.id);
	//   this.dataDay=this.$route.params.id;
	  this.dataDay = sessionStorage.getItem("calendarDay");
	//   console.log("dataDay的值"+this.dataDay);
    },
	getBlogList() {
      this.axios.get("http://120.77.213.195:8001/blog/list").then((response) => {
        var Data = response.data;
        this.blogs = Data.blogs;
		var day = this.dataDay;
		var part=[];
		// console.log("点击日期："+this.dataDay);
		$.each(Data.blogs, function(index,item){
			// console.log("blog时间："+item.updateTime);
			// console.log("点击日期："+day);
			if(item.updateTime == day){
				// console.log("相同时间");
				part.push(item);
			}
		});
		this.blogpart = part;
        console.log(response.data);
		if(response.data.code != 0){
			sessionStorage.setItem("loginUser",'');
		}
		// console.log("对应的博客：");
		// console.log(this.blogpart);
      });
    },
	OnCalendar(data) {
		//   console.log("点击日历处理");
		//   console.log(data);
		//   location.reload();
		sessionStorage.setItem("calendarDay",data);
		this.$router.go(0);
	},
	onSubmit(blog) {
		// console.log(blog);
		this.$router.push({ name: 'detail', params: { id: blog } });
    },
	  
  },
}
</script>

<style>
.blogtime{
	font-size: smaller;
}
.blogtitle{
	text-align: center;
	line-height: 40px;
	height: 40px;
	border-radius: 4px;
	background-color: rgb(255, 255, 255);
}
.block {
  padding: 10px 60px 0 60px;
}
.el-calendar-table .el-calendar-day {
	height: 30px;
}
.el-calendar__title{
	font-size: smaller;
}
.el-calendar__button-group{
	font: smaller;
}
</style>